import React from 'react';
import PropTypes from 'prop-types';
import {
    View,
    Text,
    Button,
    StyleSheet,
    TouchableOpacity,
    ViewPropTypes
} from 'react-native';

/**
 * 自定义ScrollableTabViewPage的TabBar
 */

export default class MyTabBar extends React.Component {

    propTypes = {
        goToPage: PropTypes.func, // 跳转到对应tab的方法
        activeTab: PropTypes.number, // 当前被选中的tab下标
        tabs: PropTypes.array, // 所有tabs集合
        goToPage: PropTypes.func,
        backgroundColor: PropTypes.string,
        activeTextColor: PropTypes.string,
        inactiveTextColor: PropTypes.string,
        textStyle: Text.propTypes.style,
        tabStyle: ViewPropTypes.style,
        renderTab: PropTypes.func,
        underlineStyle: ViewPropTypes.style,
    }

    constructor(props) {
        super(props);
    }

    static defaultProps = {
        activeTextColor: 'navy',
        inactiveTextColor: 'black',
        backgroundColor: null,
    };



    render() {
        return (
            <View style={[styles.tabs, { backgroundColor: this.props.backgroundColor, padding: 10, height: 60 }, this.props.style,]}>
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start' }}>
                    <Text>左边</Text>
                </View>
                <View style={{ flex: 1, flexDirection: 'row' }}>
                    {this.props.tabs.map((name, page) => {
                        const isTabActive = this.props.activeTab === page;
                        return this.renderTab(name, page, isTabActive, this.props.goToPage);
                    })}
                </View>
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end', }}>
                    {/* 这里通过组件的props属性来获取页面传递过来的参数，渲染组件 */}
                    {this.props.renderNavigationRightView && this.props.renderNavigationRightView()}
                </View>
                {/* <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>
                    <Text>右边</Text>
                </View> */}
            </View>
        );
    }


    renderTab(name, page, isTabActive, onPressHandler) {
        const radius = 5;
        const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
        const textColor = isTabActive ? activeTextColor : inactiveTextColor;
        const fontWeight = isTabActive ? 'bold' : 'normal';
        const backgroundColor = isTabActive ? "#FFF" : '#6a91f8';
        const isFirst = page === 0;
        const isLast = this.props.tabs.length - 1 === page;
        const borderRadiusStyle = isFirst ? {
            borderTopLeftRadius: radius,
            borderBottomLeftRadius: radius,
        } : isLast ? {
            borderTopRightRadius: radius,
            borderBottomRightRadius: radius,
        } : {};
        return (
            <View style={{ flex: 1 }}>
                <TouchableOpacity
                    style={{ flex: 1 }}
                    key={name}
                    accessible={true}
                    accessibilityLabel={name}
                    accessibilityTraits='button'
                    onPress={() => onPressHandler(page)}>
                    <View style={[styles.tab, borderRadiusStyle, {
                        backgroundColor: backgroundColor,
                        borderWidth: 1,
                        borderColor: "#fff",
                        paddingVertical: 5
                    }, this.props.tabStyle,]}>
                        <Text style={[{ color: textColor, fontWeight, fontSize: 14 }, textStyle,]}>{name}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabs: {
        height: 50,
        flexDirection: 'row',
        // justifyContent: 'space-around',
        borderWidth: 2,
        borderTopWidth: 0,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        borderColor: '#ccc',
    },
});